<template>
  <div class="h-box">
    <el-breadcrumb separator-icon="ArrowRight" style="margin: 16px">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>假期出入宿舍登记</el-breadcrumb-item>
        </el-breadcrumb>
      <el-card style="margin: 15px; min-height: calc(100vh - 111px)">
            <p style="margin-bottom: 50px;">登记表单</p>
              <el-form ref="form" :model="form" :rules="rules" label-width="120px" style="width:500px;">
                       
                <el-form-item label="学号" prop="stuId">
                    <el-input v-model="form.stuId" style="width: 80%"></el-input>
                        </el-form-item>
                        <el-form-item label="姓名" prop="stuName">
                            <el-input v-model="form.stuName" style="width: 80%"></el-input>
                        </el-form-item>
                        <el-form-item label="进校日期" prop="holiEnterDate">
                                <el-date-picker
                                v-model="form.holiEnterDate"
                                type="date"
                                placeholder="选择日期">
                                </el-date-picker>
                        </el-form-item>
                        <el-form-item label="出校日期" prop="holiOutDate">
                                <el-date-picker
                                v-model="form.holiOutDate"
                                type="date"
                                placeholder="选择日期">
                                </el-date-picker>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">登记</el-button>
                            <el-button @click="reset">重置</el-button>
                        </el-form-item>
                    </el-form>       

        
    </el-card>

  </div>
</template>

<script>
import request from '@/utils/request';
export default {
    name:"applyhoildayinfo",
    data(){
        return {
            form:{
                stuId:null,
                stuName:null,
                holiOutDate:null,
                holiEnterDate:null
            },
            rules: {
                stuId: [
                    {required: true, message: "请输入学号", trigger: "blur"},
                ],
                stuName: [
                    {required: true, message: "请输入姓名", trigger: "blur"},
                ],
                
                holiEnterDate:[{
                    required: true, message: "时间不能为空", trigger: "blur"
                }],
                holiOutDate:[{
                    required: true, message: "时间不能为空", trigger: "blur"
                }],
                
               
            },
        }
    },
    methods:{
        reset(){
            this.form={}
        },
        onSubmit(){
            this.$refs.form.validate(vaild=>{
                if(vaild){
                    request.post("/holi/applyadd",this.form).then(res=>{
                        if(res.code==="1"){
                            this.$message({
                            type:'success',
                            message:'成功登记'
                            })
                            this.form={};
                        }
                        else{
                            this.$message({
                            type:'error',
                            message:res.msg
                            })
                        }
                    })
                }

            })
        }
    }
    

}
</script>

<style>

</style>